<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>CSS3 动态进度条</title>
    <script src="./prefixfree.js"></script>
	<style>
		.progress {
			width: 1000px;
			height: 100px;
			margin: 100px auto;
			background: linear-gradient( 135deg, lightblue 25%, transparent 25%, transparent 50%, lightblue 50%, lightblue 75%, transparent 75%);
			background-size: 100px 100px;
			animation: move 1s infinite linear;
		}
		
		@keyframes move {
			from {
				background-position: -100px 0;
			}
			to {
				background-position: 0 0;
			}
		}
	</style>
</head>

<body>
	<div class="progress"></div>
</body>

</html>